<template>
  <div style="width: 100%;height: 500px">

    <el-container>
      <el-header>
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple-dark">
              <el-input placeholder="请输入要查询的财务支出ID" v-model="queryInfo.fExpenditureId" clearable @clear="getFiscalExpenditureList()">
                <el-button slot="append" icon="el-icon-search" @click="getFiscalExpenditureList()"></el-button>
              </el-input>
            </div>
          </el-col>
          <!--        <el-col :span="16" align="right">-->
          <!--          <div class="grid-content bg-purple-dark">-->
          <!--            <el-button slot="append" @click="dialogFormVisible=true">新增财务收入信息</el-button>-->
          <!--          </div>-->
          <!--        </el-col>-->
          <el-col :span="16" align="right">
            <div class="grid-content bg-purple-dark" >
              <el-button type="danger" slot="append" @click="deleteFinancialRevenue(FiscalExpenditure)" >批量删除</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
        <el-table :data="FiscalExpenditure" style="width: 100%" border ref="getChackBox">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="fexpenditureId" label="财务支出Id" width="180"></el-table-column>
          <el-table-column prop="purchaseId" label="采购订单Id" width="180"></el-table-column>
          <el-table-column prop="money" label="支出总金额"></el-table-column>
          <el-table-column prop="data_time" label="当前时间"></el-table-column>
          <el-table-column prop="audit_state" label="审核状态" :formatter="fiscalExpenditureAuditState"></el-table-column>
          <el-table-column prop="type" label="支出类型" :formatter="fiscalExpenditureType"></el-table-column>
          <el-table-column prop="describes" label="描述"></el-table-column>

          <el-table-column label="操作" style="width: 200px">
            <template scope="scope">
              <el-button size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteFinancialRevenueById(scope.row.fexpenditureId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--新增的窗口-->
        <el-dialog title="新增财务支出信息" :visible.sync="dialogFormVisible">
          <!--有多个form表单 怎么区分 ref="名字"  获取的形式 this.$refs['名字']-->
          <el-form ref="addForm" :model="addForm">
            <el-form-item label="财务收入Id" :label-width="formLabelWidth">
              <el-input v-model="addForm.fRevenueId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="销售订单Id" :label-width="formLabelWidth">
              <el-input v-model="addForm.salesOrderId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收入总金额" :label-width="formLabelWidth">
              <el-input v-model="addForm.money" ></el-input>
            </el-form-item>
            <el-form-item label="当前时间" :label-width="formLabelWidth">
              <el-input type="date" v-model="addForm.dataTime"></el-input>
            </el-form-item>
            <el-form-item label="审核状态" :label-width="formLabelWidth">
              <el-radio-group v-model="addForm.auditState">
                <el-radio label="已审核"></el-radio>
                <el-radio label="未审核"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="支付状态" :label-width="formLabelWidth">
              <el-radio-group v-model="addForm.state">
                <el-radio label="已收款"></el-radio>
                <el-radio label="未收款"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="收入类型" :label-width="formLabelWidth">
              <el-radio-group v-model="addForm.type">
                <el-radio label="1"></el-radio>
                <el-radio label="2"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="addForm.describes"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
          </div>
        </el-dialog>

        <!--修改的窗口-->
        <el-dialog title="修改财务支出信息" :visible.sync="editFormVisible">
          <!--有多个form表单 怎么区分 ref="名字"  获取的形式 this.$refs['名字']-->
          <el-form ref="editForm"  :model="editForm">
            <el-form-item label="财务支出Id" :label-width="formLabelWidth">
              <el-input v-model="editForm.fExpenditureId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="采购订单Id" :label-width="formLabelWidth">
              <el-input v-model="editForm.purchaseId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="支出总金额" :label-width="formLabelWidth">
              <el-input v-model="editForm.money" ></el-input>
            </el-form-item>
            <el-form-item label="当前时间" :label-width="formLabelWidth">
              <el-input type="date" v-model="editForm.data_time"></el-input>
            </el-form-item>
            <el-form-item label="审核状态" :label-width="formLabelWidth">
              <el-radio-group v-model="editForm.audit_state">
                <el-radio :label="1">已审核</el-radio>
                <el-radio :label="2">未审核</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="支出类型" :label-width="formLabelWidth">
              <el-radio-group v-model="editForm.type">
                <el-radio :label="1">采购支出</el-radio>
                <el-radio :label="2">销售退款</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="editForm.describes"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editSubmit('editForm')">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>

      <el-footer>
        <el-pagination
            @current-change="changePage"
            @size-change="changeSize"
            :current-page="queryInfo.page"
            :page-size="queryInfo.limit"
            layout="total, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
import calms from "@/netWork/request";

export default {
  name: "FiscalExpenditure",
  data(){
    return {
      FiscalExpenditure: [],
      moreDelete: [],
      count:0,
      queryInfo:{
        fExpenditureId:'',
        limit: 5,
        page: 1
      },
      dialogFormVisible: false,//新增窗口的显示隐藏开关
      addForm: { //新增对象
        fExpenditureId:'',
        purchaseId: '',
        money: '',
        data_time: '',
        audit_state: '',
        type: '',
        describes: ''
      },
      editFormVisible: false,//修改窗口的显示隐藏开关
      editForm: { //修改对象
        fExpenditureId:'',
        purchaseId: '',
        money: '',
        data_time: '',
        audit_state: '',
        type: '',
        describes: ''
      },
      formLabelWidth: '120px',
    }
  },
  methods:{
    fiscalExpenditureAuditState(row){
      return row.audit_state==1?"已审核":"未审核"
    },
    fiscalExpenditureType(row){
      return row.type==1?"采购支出":"销售退款"
    },

    //新增表单提交
    submitForm(formName) {
      //表单验证 三步走  1) 定义规则  2)绑定规则  3)表单的validate方法来验证
      //1)表单 验证  表单.validate( callback(回调函数))
      //表单.validate( function callback(valid){ //处理验证的结果})
      //表单.validate( (valid)=>{})
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //2)验证通过，发送请求到后台 完成数据保存
          //发送axios请求  完成数据的接收
          //调用自己封装的请求实例
          let strData=this.qs.stringify(this.addForm);
          this.$request({
            method:'POST',
            url: '/insertFiscalExpenditure',
            data:strData
          },res=>{
            this.getFiscalExpenditureList();
            this.$message({
              message: '保存成功',
              type: 'success',
              duration:0,
              showClose:true,
              offset:400
            });
          },error=>{
            //提示信息框
            console.log(error);
          },8400)
          //3)关闭窗口
          this.dialogFormVisible=false;
        } else {
          //2)验证不通过
          console.log('error submit!!');
          return false;//意味着表单不提交
        }
      });
    },

    //修改弹窗
    showEditDialog(row){
      //1) 让对话框绑数据 双向绑定  editForm JSON对象 ,给对象赋值
      /*      let {bookId,bookName,bookPrice,bookDesc}=row;//对象解构
            this.editForm={//对象简写
                bookId,
                bookName,
                bookPrice,
                bookDesc
            }
          此段代码的整体意思：
              this.$http.get会发送一个ajax异步请求，
              然后程序会等待此语句的执行，但是不会影响后面语句的执行，
              这就叫做异步方法，
              async关键字表示test方法是一个异步方法，
              然后只有被async修饰的异步方法内部才能够使用await关键字，
              此关键字是async wait的缩写，
              表示会等待此句代码的执行，并且不会影响test异步方法后面的代码的执行。
          代码执行后，
          你会发现console.log("虽然我在后面，但是我先输出了");
          这句代码先输出，而console.log(result);后输出
      */
      this.editForm=row
      console.log(this.editForm.type)
      this.editForm.fExpenditureId=row.fexpenditureId
      this.editForm.TYPE=row.type
      console.log("虽然我在后面，但是我先输出了"+this.editForm);
      //2)让对话框可见   响应式数据开发 ，操作都是数据
      this.editFormVisible=true;
    },

    //修改表单提交
    editSubmit(formName) {
      //表单验证 三步走  1) 定义规则  2)绑定规则  3)表单的validate方法来验证
      //1)表单 验证  表单.validate( callback(回调函数))
      //表单.validate( function callback(valid){ //处理验证的结果})
      //表单.validate( (valid)=>{})
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //2)验证通过，发送请求到后台 完成数据保存
          //发送axios请求  完成数据的接收
          //调用自己封装的请求实例
          let strData=this.$qs.stringify(this.editForm);
          this.$request({
            method:"POST",
            contentType: "application/json",
            url: '/updateFiscalExpenditure',
            data: strData
          },res=>{
            this.getFiscalExpenditureList();
            this.$message({
              message: '保存成功',
              type: 'success',
              duration:0,
              showClose:true,
              offset:400
            });
          },error=>{
            //提示信息框
            console.log(error);
          },8400)
          //3)关闭窗口
          this.editFormVisible=false;
        } else {
          //2)验证不通过
          console.log('error submit!!');
          return false;//意味着表单不提交
        }
      });
    },

    //根据主键ID进行删除
    deleteFinancialRevenueById(fexpenditureId){
      console.log("选中的ID是：" + fexpenditureId);
      this.$confirm('此操作将永久删除该财务收入信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$request({
          method:'post',
          url: '/deleteFiscalExpenditure?fExpenditureId=' + fexpenditureId,
        },res=>{
          this.getFiscalExpenditureList();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        },error=>{
          //提示信息框
          console.log(error);
        },8400)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //根据主键ID进行批量删除
    deleteFinancialRevenue(val){
      //提示语
      this.$confirm('确定删除用户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let str = this.$refs.getChackBox.selection
        console.log(str)
        var name = ""
        for (let i = 0; i < str.length; i++) {
          if(i==str.length-1){
            name+=str[i].fexpenditureId
            break
          }
          name+=str[i].fexpenditureId+","
        }
        console.log(name)
        calms({
          url: '/deleteFiscalExpenditureById',
          contentType: "application/json",
          params: {fExpenditureId:name},
        }, res => {
          console.log("删除信息：" + res.data);
          if (res.data >=1) {
            this.getFiscalExpenditureList();
            this.$message.success('删除成功')
          } else {
            this.$message.error('删除失败')
          }
        }, err => {
          console.log(err);
        },8400)
      })
    },

    changePage(newPage){
      //改变页码，发送请求到后台
      this.queryInfo.page=newPage;
      this.getFiscalExpenditureList();
    },

    changeSize(m){
      //改变页码，发送请求到后台
      this.queryInfo.limit=newSize;
      this.getFiscalExpenditureList();
    },

    getFiscalExpenditureList(){
      //发送axios请求  完成数据的接收
      //调用自己封装的请求实例
      this.$request({
        method:'GET',
        url: '/LimitFiscalExpenditure',
        //data:strData
        headers:{
          token: sessionStorage.getItem("token")
        },
        params:this.queryInfo
      },res=>{
        //得到传送过来的数据，赋值给FinancialRevenue
        this.FiscalExpenditure = res.data.data;
        this.count=res.data.count;
        console.log(this.FiscalExpenditure)
      },error=>{
        console.log("失败，数据是："+ error.data);
      },8400)
    }
  },
  created() {
    //调用获取数据的方法
    this.getFiscalExpenditureList();
  }
}
</script>

<style scoped>

</style>